<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var str =
        "[00:00.000] 作词 : 谌彦兮JC/李斯丹妮\n[00:00.513] 作曲 : 谌彦兮JC/李斯丹妮\n[00:01.026] 编曲 : 谌彦兮JC\n[00:01.539] 制作人 : 程天禹\n[00:02.52]完 美了没 美了没\n[00:04.02]吹散黑的雾\n[00:07.29]玩 美了没 美了没\n[00:08.85]在起飞的 Move\n[00:12.06]范 美了没 美了没\n[00:13.62]走到位的步\n[00:16.95]看 美了没 美了没\n[00:18.33]就别挡我的路\n[00:20.76]早就厌倦套路 看透招数\n[00:22.83]管什么风浪 都经得住\n[00:24.42]轻笑迈步 流言从不在乎\n[00:26.76]尽情炫目 Girl I don’ t need to prove\n[00:28.71]算你表情严肃 烂规矩我不服\n[00:31.50]他们是贪的苦 争强好胜算着数\n[00:33.93]假笑而占着卜 我跳着云端的舞\n[00:36.39]不被袒护 也放肆不一般的酷\n[00:38.88]百无禁忌入场 要怎么拦得住\n[00:40.86] Woo I’ m ballin’\n[00:43.26]天性耀眼还不够\n[00:45.60] Woo stay low\n[00:48.09]从不区分谄媚和嘲讽\n[00:50.88] Woo watch me dance\n[00:53.25]打破它也不管\n[00:55.56]不需要谁的靠佑\n[00:57.99]我自己出手\n[01:00.09]完 美了没 美了没\n[01:01.59]吹散黑的雾\n[01:02.46]玩 美了没 美了没\n[01:03.99]在起飞的 Move\n[01:04.89]范 美了没 美了没\n[01:06.39]走到位的步\n[01:07.35]谁做慵懒贪心的动物\n[01:09.72]完 美了没 美了没\n[01:11.19]吹散黑的雾\n[01:12.06]玩 美了没 美了没\n[01:13.59]在起飞的 Move\n[01:14.49]看 美了没 美了没\n[01:15.93]就别挡我的路\n[01:17.10]与众不同灿烂的风度\n[01:20.79]保持低空飞行\n[01:22.05]高调潜入核心\n[01:23.22]专注我的专情\n[01:24.45]能量飙升不停\n[01:25.62]轻松赢定 胜负已分\n[01:27.54]这没悬念的故事完结\n[01:29.22]你的真 欸 不过是角色扮演\n[01:31.68]人间剧场 纷争欲望不浪漫\n[01:34.05]何必抵挡 不同立场的判断\n[01:36.39]黑发轻扬 头轻昂 要晴朗 从不黯淡\n[01:38.76]我独享自己主场 夸好你赞叹\n[01:42.21] Woo I’ m ballin’\n[01:43.26]天性耀眼还不够\n[01:45.63] Woo stay low\n[01:48.09]从不区分谄媚和嘲讽\n[01:50.85] Woo watch me dance\n[01:53.25]打破它也不管\n[01:55.56]不需要谁的靠佑\n[01:57.96]我自己出手\n[02:00.12]完 美了没 美了没\n[02:01.59]吹散黑的雾\n[02:02.52]玩 美了没 美了没\n[02:03.99]在起飞的 Move\n[02:04.92]范 美了没 美了没\n[02:06.39]走到位的步\n[02:07.29]谁做慵懒贪心的动物\n[02:09.75]完 美了没 美了没\n[02:11.19]吹散黑的雾\n[02:12.06]玩 美了没 美了没\n[02:13.59]在起飞的 Move\n[02:14.49]看 美了没 美了没\n[02:15.93]就别挡我的路\n[02:17.19]与众不同灿烂的风度\n[02:26.58]（ SDANNYLEE）\n[02:31.44]不靠完美 收割目光\n[02:32.76]习惯一面独当\n[02:33.99]骄傲是躯壳 灵感做翅膀\n[02:36.03]不再害 怕没有人鼓掌\n[02:38.73]管他世事无常\n[02:40.02]停止沉默 却没停止绽放扎根土壤\n[02:43.23]不上虚荣的当\n[02:44.55]我搭建新的城墙\n[02:47.22]每天像真人秀场\n[02:48.75]不同的角色各自在酝酿\n[02:51.00]走位观赏 谁巧舌如簧\n[02:52.74]谁纠结紧张 谁制造着音浪\n[02:55.02]点化自私欲望\n[02:57.00]独处喧闹中冥想\n[02:59.01]不再隐藏真实的模样\n[03:00.75]充斥着心脏 New level被点亮\n[03:02.00]配唱制作人：程天禹/谌彦兮JC\n[03:02.40]混音：谌彦兮JC\n[03:02.476] 母带工程师 ：Chris Gehringer@Sterlin SoundIntro\n[03:02.912] 出品（OP/SP）：天娱传媒\n[03:03.348] 出品人：申亚东\n[03:03.784] 监制：王桂红\n[03:04.220] 项目统筹：八爪\n[03:04.656] A&R企划：王瑜Fish Wong\n[03:05.092] 平面摄影：戴晓艺\n[03:05.528] 平面设计：CANA\n[03:05.964] 视频预告片团队：娱罐头x罐头造\n[03:06.400] 宣传营销：晓春/张梦迪/陈李奕\n[03:06.836] 版权商务：杨荧焱\n[03:07.272] （收歌邮箱：213806701@qq.com）\n";

      var arr = str
        .split("\n")
        .filter((s) => s)
        .map((item) => {
          var match = item.match(
            /^\[(?<time>\d{2}:\d{2}\.\d{2,3})\] *(?<text>.*)$/im
          );

          return match.groups;
        })
        .map((o) => {
          var match = o.time.match(/(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})/i);
          //   console.log(match.groups.m * 60 + match.groups.s * 1);
          return {
            ...o,
            time: (match.groups.m * 60 + match.groups.s * 1).toFixed(3),
          };
        });
      //   console.log(arr);

      var xxx = "[00:00.000] 作词 : 谌彦兮JC/李斯丹妮";
      //   var yy = xxx.match(/\[\d{2}:\d{2}\.\d{2,3}\]/gim);
      //   var zz = xxx.replace(yy, "");

      var a = xxx.match(/^\[(?<time>\d{2}:\d{2}\.\d{2,3})\] *(?<text>.*)$/im);

      function parseLyric(str) {
        return str
          .split("\n")
          .filter((s) => s)
          .map((item) => {
            var match = item.match(
              /^\[(?<time>\d{2}:\d{2}\.\d{2,3})\] *(?<text>.*)$/im
            );

            return match.groups;
          })
          .map((o) => {
            var match = o.time.match(/(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})/i);
            //   console.log(match.groups.m * 60 + match.groups.s * 1);
            return {
              ...o,
              time: (match.groups.m * 60 + match.groups.s * 1).toFixed(3),
            };
          });
      }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <div id="app">
      <keep-alive>
        <test-xxx v-if="bool"></test-xxx>
        <test-yyy v-else></test-yyy>
      </keep-alive>
    </div>
    <script>
      Vue.component("test-xxx", {
        data: function () {
          return {
            count: 0,
          };
        },
        template: "<div @click='count++'>xxx{{count}}</div>",
        created: function () {
          console.log("xxx 创建");
        },
      });
      Vue.component("test-yyy", {
        data: function () {
          return {
            n: 0,
          };
        },
        template: "<div @click='n++'>yyy{{n}}</div>",
        created: function () {
          console.log("yyy 创建");
        },
      });

      new Vue({
        el: "#app",
        data: {
          bool: true,
        },
      });
    </script>
  </body>
</html>
